<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>流式内容</title>
  <script>
      document.querySelector('audio')
      // querySelector querySelector querySelector querySelector querySelector querySelector querySelector querySelector querySelector
      // query 查询
      // Selector 选择器
      // 查询选择器：通过选择器查询对应的元素并返回
  </script>
</head>
<body>
<div>
  <p>a标签:</p>
  <ul>
    <li><a href="https://www.baidu.com">百度</a></li>
    <li><a href="mailto:2324508773@qq.com">我的QQ邮箱</a></li>
    <li><a href="tel:+8618053236686">拨打客服电话</a></li>
  </ul>
</div>

<table></table>

<form></form>

<button></button>

<input>


<blockquote>
  Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the
  Northwestern Salamander and the Rough-skinned Newt.<br/>Most salamanders are nocturnal, and hunt for insects, worms
  and
  other small creatures.


  <dialog id="dialog">
    12312312313123
  </dialog>
</blockquote>

<cite>Nineteen Eighty-Four</cite>

<canvas class="canvas" width="500" height="500"></canvas>
<script>
    function render() {
        const canvas = document.querySelector('.canvas');
        const context = canvas.getContext('2d'); // context = 上下文 = 整体
        context.fillStyle = 'red';
        context.fillRect(25, 25, 50, 50);
        let x = 0;
        let y = 0;
        let step = 1;
        const id = setInterval(() => {
            context.clearRect(0, 0, 500, 500); // 清空上一次绘制的内容
            context.fillRect(x, y, 50, 50);
            x += step;
            y += step;
            if (x > 500 - 50) {
                step = -1;
                // clearInterval(id);
            }

            if (x < 0) {
                step = 1;
            }
        }, 1000 / 60);
    }
</script>
<button onclick="render()">点我</button>


<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

<p>
  <dfn id="def-internet">互联网</dfn> is a global system of interconnected
  networks that use the Internet Protocol Suite (TCP/IP) to serve billions of
  users worldwide.
</p>

<script>
    function openDialog() {
        const dialog = document.querySelector('#dialog')
        dialog.showModal()
    }
</script>
<button onclick="openDialog()">点我2</button>

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster" value="K"/>
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster" value="S"/>
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster" value="M"/>
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

<figure>
  <img src="https://www.keaitupian.cn/cjpic/frombd/2/253/1676065055/2828606542.jpg" alt="">
  <figcaption>一个美女</figcaption>
</figure>

<div class="container">
  <iframe src="https://www.keaitupian.cn/cjpic/frombd/2/253/1676065055/2828606542.jpg" width="500" height="500"></iframe>
</div>

</body>
</html>